<template>
  <!-- 字典分组 表单页面 -->
  <div v-if="crud.status.cu > 0">
    <el-drawer
      :title="crud.status.title"
      :visible.sync="crud.status.cu > 0"
      direction="rtl"
      :before-close="crud.cancelCU"
      :wrapper-closable="false"
      size="400px"
    >
      <div class="leisure-drawer__content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="100px"
        >
          <el-form-item label="分组名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入分组名称" clearable />
          </el-form-item>
          <!-- 父类值 -->
          <el-form-item label="上级分组" prop="parentId">
            <treeselect
              v-model="form.parentId"
              :options="dictGroupTree"
              :show-count="true"
              placeholder="可根据分组名称搜索"
              no-results-text="未找到匹配项"
              :normalizer="normalizer"
              :default-expand-level="1"
              @select="treeSelected"
            />
          </el-form-item>

          <el-form-item
            label="排序"
            prop="paixu"
          >
            <el-input-number
              v-model.number="form.paixu"
              :min="0"
              :max="999"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="form.description" placeholder="请输入描述" clearable />
          </el-form-item>
          <!-- 状态  0：禁用 ，1： 可用 -->
          <!-- 状态值 -->
          <el-form-item label="状态" prop="status">
            <!-- 代码生成器生成的 默认从通用字典 common_status 里取值，其他情况，请手动修改-->
            <el-radio-group v-for="s in dict.common_status" :key="s.key" v-model="form.status">
              <el-radio :label="Number(s.key)">{{ s.value }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <div class="leisure-drawer__footer">
          <el-button
            @click="crud.cancelCU"
          >
            取消
          </el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, { form } from '@crud/crud'
import { tree } from '@/api/sys/DictGroup'
// 字典分组 - model
const defaultForm = {
  id: null, // id
  name: null, // 分组名称
  parentId: '0',
  parentName: null, // 父级名称
  paixu: 1,
  description: null, // 描述
  status: 1,
  lockVersion: 0
}
const topId = '0'
const topTree = [
  {
    name: '最上级',
    id: topId,
    parentId: topId,
    children: []
  }
]
export default {
  components: {
    Treeselect
  },
  mixins: [form(defaultForm)],
  dicts: [
    'common_status'
  ], // 字典
  data() {
    return {
      dictGroupTree: [],
      normalizer(node) {
        // 去掉children=[]的children属性 respectively
        if (node.children && !node.children.length) {
          delete node.children
        }
        if (node.name) {
          node.label = node.name
        }
      },
      rules: {
        paixu: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.beforeToCU]() {
      this.getdictGroupTree()
    },
    // 获取字典结构树
    getdictGroupTree() {
      tree().then(res => {
        if (res && res.data) {
          topTree[0].children = [
            ...res.data
          ]
        }
        this.dictGroupTree = topTree
      })
    },
    // 树形选择事件
    treeSelected(node) {
      this.form.parentName = node.name
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

</style>
